<template>
    <div class="apply-store">
        <c-title text="适用门店"></c-title>
        <van-search v-model="keyword" placeholder="请输入门店名称" shape="round" @search="getData()" />
        <div class="main-address-wrapper" v-for="(item, i) in list" :key="i" @click="goto(item.store_id)">
            <div class="title">{{ item.name }}</div>
            <div class="flex-b">
                <div class="main-address-left">
                    <div class="main-address">{{ item.address_detail }}</div>
                    <div class="main-distance">
                        <i class="iconfont icon-dizhi1"></i>
                        <span class="main-distance-tips">距离{{ item.distance }}</span>
                    </div>
                </div>
                <div class="main-address-right">
                    <div style="margin-right: 1.1563rem;" class="main-address-right-icon"
                        @click.stop="navigation({ latitude: item.latitude, longitude: item.longitude, storeName: item.name })">
                        <span class="iconfont icon-zx_map_local"></span>
                        <span class="iconfont-txt">地图</span>
                    </div>
                    <div class="main-address-right-icon" @click.stop="callStore(item.tel)">
                        <span class="iconfont icon-zx_map_tel"></span>
                        <span class="iconfont-txt">电话</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: "",
            id: "",
            list: [],
            page: 1,
            total_page: 1,
            isLoadMore: true,
            point:{
                lat:"",
                lng:""
            },
            citycode:"",
        };
    },
    activated() {
        this.isLoadMore = true;
        let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
        if (!myLoaction) {
            this.fun
                .getLocation()
                .then((res) => {
                    this.point = res.point;
                    this.getData();
                })
                .catch(err => {
                    console.log(err);
                    this.getData();
                });
        } else {
            this.point = myLoaction ? myLoaction.point : {};
            this.getData();
        }
   
    },
    methods: {
        async getData(page = 1) {
            let keyword = this.keyword;
            let json = {goods_id: this.$route.params.goods_id * 1, keyword, page,longitude:this.point.lng,latitude:this.point.lat};
            let { result, msg, data } = await $http.post("plugin.local-life.api.store.match-store", json, '')
            if (result) {
                this.isLoadMore = true;
                this.list = page == 1 ? (data.data || []) : this.list.concat(data.data);
                this.page = data.current_page;
                this.total_page = data.last_page;
            } else {
                this.$toast(msg);
            }
        },
        callStore(phone) {
            window.location.href = "tel://" + phone;
        },
        navigation(...params) {
            let [latitude, longitude, storeName] = [...params];
            let point = this.fun.bd_decrypt(longitude, latitude);
            this.fun.goToWXAdress(point, storeName);
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) return;
            let page = this.page + 1;
            this.getData(page);
        },
        goto(store_id) {
            this.$router.push(this.fun.getUrl("local_life_store", { store_id }))
        },
    }
};
</script>

<style scoped lang='scss'>
.apply-store {
    .iconfont-txt {
        line-height: 1;
        font-weight: 400;
        font-size: .625rem;
        color: #00001C;
    }

    .title {
        text-align: left;
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
        margin-bottom: .4688rem;
    }

    .flex-b {
        display: flex;
        justify-content: space-between;

    }

    .main-address-wrapper {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .75rem;
        margin: .625rem .75rem;
    }

    .main-distance {
        display: flex;
        align-items: baseline;
        line-height: 1;
        margin-top: .5313rem;
    }

    .main-distance-tips {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
    }

    .main-address {
        font-weight: 400;
        font-size: .75rem;
        color: #00001C;
        text-align: left;
    }

    .main-address-right-icon {
        display: flex;
        flex-direction: column;
        text-wrap: nowrap;
    }

    .icon-dizhi1 {
        color: #999999;
        font-size: .75rem;
        margin-right: .1875rem;
    }

    .icon-zx_map_local,
    .icon-zx_map_tel {
        width: 1.4375rem;
        height: 1.4375rem;
        font-size: .75rem;
        line-height: 1.4375rem;
        margin-bottom: .25rem;
        background: #EAEDF3;
        border-radius: .5625rem .5625rem .5625rem .5625rem;
    }

    .main-address-right {
        display: flex;
        align-items: center;
        margin-left: 1.1563rem
    }
}
</style>